<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item label=" 机构  "  prop="departmentId">
          <el-select v-model="listQuery.departmentId" @change="deptChange" clearable placeholder="请选择">
            <el-option
              v-for="item in departmentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="停车场">
          <el-select v-model="listQuery.parkId" clearable placeholder="请选择" style="width: 160px;">
            <el-option
              v-for="item in allParkList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码">
          <el-input v-model="listQuery.plateNumber" clearable class="filter-item" style="width: 180px;" placeholder="请输入"/>
        </el-form-item>

        <!--        <el-form-item label="机构">-->
        <!--          <el-select v-model="listQuery.departmentId" placeholder="请选择" style="width: 90px;">-->
        <!--            <el-option-->
        <!--              v-for="item in type_options"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"/>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->

        <el-form-item label="选择日期" prop="dateRange">
          <el-date-picker
            v-model="listQuery.dateRange"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width:333px;"
            :default-time="['00:00:00','23:59:59']"
          ></el-date-picker>
        </el-form-item>

        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>

      </el-form>
    </div>

    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row >

      <el-table-column prop="index" label="序号" align="center">
        <template slot-scope="scope"> <span>{{ scope.$index + 1 }} </span> </template>
      </el-table-column>

      <!--      <el-table-column align="center" label="ID" prop="id"/>-->

      <el-table-column align="center" label="停车场名称" prop="parkName"/>

      <el-table-column align="center" label="进出口名称" prop="portName"/>
      <el-table-column align="center" label="机构名称" prop="departmentName" />
      <el-table-column align="center" label="车牌号码" prop="plateNumber"/>

      <el-table-column align="center" label="机构名称" prop="departmentName"/>

      <el-table-column align="center" label="操作人员" prop="type" >
        <template slot-scope="{row}">
          {{ row.createBy }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="类型" prop="typeStr"/>

      <el-table-column align="center" label="抓拍图片" prop="type" >
        <template slot-scope="{row}">
          <el-image
            v-if="row.printScreenImg"
            style="width: 100px; height: 100px"
            :src="row.printScreenImg"
            :preview-src-list="[row.printScreenImg]">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column align="center" label="备注" prop="remark"/>

      <el-table-column align="center" label="开闸时间" prop="createTime"/>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />

  </div>
</template>

<script>
import { fetchList } from '@/api/liftRailManual'
import { getDepartmentList,getListAuthPark } from '@/api/base'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'LiftRailManual',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20,
        dateRange:[],
      },
      downloadLoading: false,
      dialogTitle: '温馨提示',
      dialogFormVisible: false,
      delDialogFormVisible: false,
      dialogForm: {},
      dialogType: 1,
      name: '',
      deleteInsideRecordId: 0,
      departmentList: [],
      parkList: [],
      allParkList: [],
      passwayList: [],
      qrcodeDialogVisible: false
    }
  },
  created() {
    getDepartmentList().then(res => {
      this.departmentList = res.data || []
      this.getList()
    })
  },
  methods: {
    async getListAuthPark(departmentId){//获取停车场
      let res = await getListAuthPark({departmentId,parkType:1})
      return res.data || []
    },
    getImgShow(image){//判断图片是否显示
      if(!image) return
      return image.includes('null') ? false : true
    },
    async deptChange(e){//机构下拉选择
      let listQuery = {...this.listQuery}
      listQuery.parkId = ''
      this.listQuery = {...listQuery}
      if(!e) return this.allParkList = []
      this.allParkList = await this.getListAuthPark(e)
    },
    getList() {
      this.listLoading = true
      if(!this.listQuery.dateRange) this.listQuery.dateRange = []
      let listQuery = {...this.listQuery}
      if(this.listQuery.dateRange.length){
        listQuery.startTime = this.listQuery.dateRange[0]
        listQuery.endTime = this.listQuery.dateRange[1]
      }
      delete listQuery.dateRange
      fetchList(listQuery).then(response => {
        let data = response.data || {}
        this.list = data.list || []
        this.total = data.total || 0
        this.listLoading = false
      })
    },
    getOperator(userName, collectorName) {
      if (userName) {
        return '管理员：' + userName
      } else if (collectorName) {
        return '岗亭人员：' + collectorName
      }
      return '未知'
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }

  }
}
</script>

<style scoped>

</style>
